<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg">
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
   width="500px" height="400px" 
  viewBox="0 0 1000 800" zoomAndPan="disable"
  <rect style="fill:black; stroke:blue; stroke-width:10;" x="0" y="200" width="500" height="400"/>
  <line x1="60" y1="220" x2="60"  y2="550" style="stroke:white;stroke-width:5"/>
  <line x1="57" y1="550" x2="350" y2="550" style="stroke:white;stroke-width:5;"/>
  
  {% for sc in scale %}
	<line x1="50" y1="{{sc}}" x2="70" y2="{{sc}}" style="stroke:white;stroke-width:5;"/>
  {% endfor %}
  <text x="40" y="250" font-size="20" text-anchor="middle" fill="white">{{10}}</text>
	<text x="40" y="310" font-size="20" text-anchor="middle" fill="white">{{8}}</text>
	<text x="40" y="370" font-size="20" text-anchor="middle" fill="white">{{6}}</text>
	<text x="40" y="430" font-size="20" text-anchor="middle" fill="white">{{4}}</text>
	<text x="40" y="490" font-size="20" text-anchor="middle" fill="white">{{2}}</text>
	<text x="130" y="570" font-size="15" text-anchor="middle" fill="white">GOOD</text>
	<text x="230" y="570" font-size="15" text-anchor="middle" fill="white">BAD</text>
	<line x1="130" y1="300" x2="130" y2="550" style="stroke:white;stroke-width:70;"/>
	<line x1="230" y1="300" x2="230" y2="550" style="stroke:white;stroke-width:70;"/>
  </svg> 
 
</body>
</html>

